<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3226930" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe607;</span>
                <div class="name">更多</div>
                <div class="code-name">&amp;#xe607;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64d;</span>
                <div class="name">更多</div>
                <div class="code-name">&amp;#xe64d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe693;</span>
                <div class="name">更多</div>
                <div class="code-name">&amp;#xe693;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe688;</span>
                <div class="name">更多备份</div>
                <div class="code-name">&amp;#xe688;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64c;</span>
                <div class="name">更多</div>
                <div class="code-name">&amp;#xe64c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb21;</span>
                <div class="name">公告</div>
                <div class="code-name">&amp;#xeb21;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb22;</span>
                <div class="name">上传资源</div>
                <div class="code-name">&amp;#xeb22;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61a;</span>
                <div class="name">开庭公告</div>
                <div class="code-name">&amp;#xe61a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64a;</span>
                <div class="name">公告</div>
                <div class="code-name">&amp;#xe64a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64b;</span>
                <div class="name">上传资源</div>
                <div class="code-name">&amp;#xe64b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe610;</span>
                <div class="name">公告</div>
                <div class="code-name">&amp;#xe610;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe653;</span>
                <div class="name">上传资源</div>
                <div class="code-name">&amp;#xe653;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe633;</span>
                <div class="name">转换</div>
                <div class="code-name">&amp;#xe633;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe628;</span>
                <div class="name">转换</div>
                <div class="code-name">&amp;#xe628;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe648;</span>
                <div class="name">转换-01</div>
                <div class="code-name">&amp;#xe648;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60c;</span>
                <div class="name">点赞</div>
                <div class="code-name">&amp;#xe60c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe600;</span>
                <div class="name">赞</div>
                <div class="code-name">&amp;#xe600;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb1f;</span>
                <div class="name">赞</div>
                <div class="code-name">&amp;#xeb1f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb20;</span>
                <div class="name">点赞</div>
                <div class="code-name">&amp;#xeb20;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb1a;</span>
                <div class="name">评论</div>
                <div class="code-name">&amp;#xeb1a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb1b;</span>
                <div class="name">转发</div>
                <div class="code-name">&amp;#xeb1b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe627;</span>
                <div class="name">评论</div>
                <div class="code-name">&amp;#xe627;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60f;</span>
                <div class="name">评论</div>
                <div class="code-name">&amp;#xe60f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ce;</span>
                <div class="name">转发</div>
                <div class="code-name">&amp;#xe6ce;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8b4;</span>
                <div class="name">评论</div>
                <div class="code-name">&amp;#xe8b4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe895;</span>
                <div class="name">转发1</div>
                <div class="code-name">&amp;#xe895;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe791;</span>
                <div class="name">转发</div>
                <div class="code-name">&amp;#xe791;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb1c;</span>
                <div class="name">评论</div>
                <div class="code-name">&amp;#xeb1c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb1d;</span>
                <div class="name">转发</div>
                <div class="code-name">&amp;#xeb1d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb1e;</span>
                <div class="name">转发1</div>
                <div class="code-name">&amp;#xeb1e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe690;</span>
                <div class="name">文件夹文件</div>
                <div class="code-name">&amp;#xe690;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68b;</span>
                <div class="name">icon_comment</div>
                <div class="code-name">&amp;#xe68b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xea00;</span>
                <div class="name">浏览量</div>
                <div class="code-name">&amp;#xea00;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb19;</span>
                <div class="name">icon_comment</div>
                <div class="code-name">&amp;#xeb19;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe681;</span>
                <div class="name">浏览量</div>
                <div class="code-name">&amp;#xe681;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe685;</span>
                <div class="name">反馈</div>
                <div class="code-name">&amp;#xe685;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62e;</span>
                <div class="name">点赞数</div>
                <div class="code-name">&amp;#xe62e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7f8;</span>
                <div class="name">下载量</div>
                <div class="code-name">&amp;#xe7f8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb16;</span>
                <div class="name">浏览量</div>
                <div class="code-name">&amp;#xeb16;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe656;</span>
                <div class="name">我的反馈</div>
                <div class="code-name">&amp;#xe656;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60a;</span>
                <div class="name">意见反馈</div>
                <div class="code-name">&amp;#xe60a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe605;</span>
                <div class="name">首页</div>
                <div class="code-name">&amp;#xe605;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe615;</span>
                <div class="name">叉</div>
                <div class="code-name">&amp;#xe615;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe611;</span>
                <div class="name">plus-1</div>
                <div class="code-name">&amp;#xe611;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe649;</span>
                <div class="name">奔跑</div>
                <div class="code-name">&amp;#xe649;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe614;</span>
                <div class="name">树</div>
                <div class="code-name">&amp;#xe614;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68e;</span>
                <div class="name">蚕豆</div>
                <div class="code-name">&amp;#xe68e;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot?t=1647527298184'); /* IE9 */
  src: url('iconfont.eot?t=1647527298184#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
       url('iconfont.woff?t=1647527298184') format('woff'),
       url('iconfont.ttf?t=1647527298184') format('truetype'),
       url('iconfont.svg?t=1647527298184#iconfont') format('svg');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont zhiran-icongengduo2"></span>
            <div class="name">
              更多
            </div>
            <div class="code-name">.zhiran-icongengduo2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont zhiran-icongengduo"></span>
            <div class="name">
              更多
            </div>
            <div class="code-name">.zhiran-icongengduo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont zhiran-icongengduo1"></span>
            <div class="name">
              更多
            </div>
            <div class="code-name">.zhiran-icongengduo1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont zhiran-icongengduobeifen"></span>
            <div class="name">
              更多备份
            </div>
            <div class="code-name">.zhiran-icongengduobeifen
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont zhiran-iconziyuanxhdpi"></span>
            <div class="name">
              更多
            </div>
            <div class="code-name">.zhiran-iconziyuanxhdpi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont zhiran-icongonggao1-copy"></span>
            <div class="name">
              公告
            </div>
            <div class="code-name">.zhiran-icongonggao1-copy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont zhiran-iconshangchuanziyuan-copy"></span>
            <div class="name">
              上传资源
            </div>
            <div class="code-name">.zhiran-iconshangchuanziyuan-copy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont zhiran-iconkaitinggonggao"></span>
            <div class="name">
              开庭公告
            </div>
            <div class="code-name">.zhiran-iconkaitinggonggao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont zhiran-icongonggao"></span>
            <div class="name">
              公告
            </div>
            <div class="code-name">.zhiran-icongonggao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont zhiran-iconshangchuanziyuan"></span>
            <div class="name">
              上传资源
            </div>
            <div class="code-name">.zhiran-iconshangchuanziyuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont zhiran-icongonggao1"></span>
            <div class="name">
              公告
            </div>
            <div class="code-name">.zhiran-icongonggao1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont zhiran-iconshangchuanziyuan1"></span>
            <div class="name">
              上传资源
            </div>
            <div class="code-name">.zhiran-iconshangchuanziyuan1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont zhiran-iconzhuanhuan1"></span>
            <div class="name">
              转换
            </div>
            <div class="code-name">.zhiran-iconzhuanhuan1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont zhiran-iconzhuanhuan"></span>
            <div class="name">
              转换
            </div>
            <div class="code-name">.zhiran-iconzhuanhuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont zhiran-iconzhuanhuan-01"></span>
            <div class="name">
              转换-01
            </div>
            <div class="code-name">.zhiran-iconzhuanhuan-01
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont zhiran-icondianzan"></span>
            <div class="name">
              点赞
            </div>
            <div class="code-name">.zhiran-icondianzan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont zhiran-iconicon1"></span>
            <div class="name">
              赞
            </div>
            <div class="code-name">.zhiran-iconicon1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont zhiran-iconicon1-copy"></span>
            <div class="name">
              赞
            </div>
            <div class="code-name">.zhiran-iconicon1-copy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont zhiran-icondianzan-copy"></span>
            <div class="name">
              点赞
            </div>
            <div class="code-name">.zhiran-icondianzan-copy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont zhiran-iconpinglun3-copy"></span>
            <div class="name">
              评论
            </div>
            <div class="code-name">.zhiran-iconpinglun3-copy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont zhiran-iconzhuanfa1-copy"></span>
            <div class="name">
              转发
            </div>
            <div class="code-name">.zhiran-iconzhuanfa1-copy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont zhiran-iconpinglun1"></span>
            <div class="name">
              评论
            </div>
            <div class="code-name">.zhiran-iconpinglun1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont zhiran-iconpinglun2"></span>
            <div class="name">
              评论
            </div>
            <div class="code-name">.zhiran-iconpinglun2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont zhiran-iconzhuanfa1"></span>
            <div class="name">
              转发
            </div>
            <div class="code-name">.zhiran-iconzhuanfa1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont zhiran-iconpinglun3"></span>
            <div class="name">
              评论
            </div>
            <div class="code-name">.zhiran-iconpinglun3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont zhiran-iconzhuanfa11"></span>
            <div class="name">
              转发1
            </div>
            <div class="code-name">.zhiran-iconzhuanfa11
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont zhiran-icona-ziyuan618"></span>
            <div class="name">
              转发
            </div>
            <div class="code-name">.zhiran-icona-ziyuan618
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont zhiran-iconpinglun1-copy"></span>
            <div class="name">
              评论
            </div>
            <div class="code-name">.zhiran-iconpinglun1-copy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont zhiran-icona-ziyuan618-copy"></span>
            <div class="name">
              转发
            </div>
            <div class="code-name">.zhiran-icona-ziyuan618-copy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont zhiran-iconzhuanfa11-copy"></span>
            <div class="name">
              转发1
            </div>
            <div class="code-name">.zhiran-iconzhuanfa11-copy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont zhiran-iconwenjianjiawenjian"></span>
            <div class="name">
              文件夹文件
            </div>
            <div class="code-name">.zhiran-iconwenjianjiawenjian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont zhiran-iconicon_comment"></span>
            <div class="name">
              icon_comment
            </div>
            <div class="code-name">.zhiran-iconicon_comment
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont zhiran-iconliulanliang"></span>
            <div class="name">
              浏览量
            </div>
            <div class="code-name">.zhiran-iconliulanliang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont zhiran-iconicon_comment-copy"></span>
            <div class="name">
              icon_comment
            </div>
            <div class="code-name">.zhiran-iconicon_comment-copy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont zhiran-iconliulanliang_huaban"></span>
            <div class="name">
              浏览量
            </div>
            <div class="code-name">.zhiran-iconliulanliang_huaban
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont zhiran-iconfeedback"></span>
            <div class="name">
              反馈
            </div>
            <div class="code-name">.zhiran-iconfeedback
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont zhiran-icondianzanshu2"></span>
            <div class="name">
              点赞数
            </div>
            <div class="code-name">.zhiran-icondianzanshu2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont zhiran-iconxiazailiang"></span>
            <div class="name">
              下载量
            </div>
            <div class="code-name">.zhiran-iconxiazailiang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont zhiran-iconliulanliang1-copy"></span>
            <div class="name">
              浏览量
            </div>
            <div class="code-name">.zhiran-iconliulanliang1-copy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont zhiran-iconwodefankui"></span>
            <div class="name">
              我的反馈
            </div>
            <div class="code-name">.zhiran-iconwodefankui
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont zhiran-iconyijianfankui"></span>
            <div class="name">
              意见反馈
            </div>
            <div class="code-name">.zhiran-iconyijianfankui
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont zhiran-iconshouye"></span>
            <div class="name">
              首页
            </div>
            <div class="code-name">.zhiran-iconshouye
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont zhiran-iconcha"></span>
            <div class="name">
              叉
            </div>
            <div class="code-name">.zhiran-iconcha
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont zhiran-iconjiahao"></span>
            <div class="name">
              plus-1
            </div>
            <div class="code-name">.zhiran-iconjiahao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont zhiran-iconbenpao"></span>
            <div class="name">
              奔跑
            </div>
            <div class="code-name">.zhiran-iconbenpao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont zhiran-iconshu"></span>
            <div class="name">
              树
            </div>
            <div class="code-name">.zhiran-iconshu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont zhiran-iconcandou"></span>
            <div class="name">
              蚕豆
            </div>
            <div class="code-name">.zhiran-iconcandou
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont zhiran-iconxxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#zhiran-icongengduo2"></use>
                </svg>
                <div class="name">更多</div>
                <div class="code-name">#zhiran-icongengduo2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#zhiran-icongengduo"></use>
                </svg>
                <div class="name">更多</div>
                <div class="code-name">#zhiran-icongengduo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#zhiran-icongengduo1"></use>
                </svg>
                <div class="name">更多</div>
                <div class="code-name">#zhiran-icongengduo1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#zhiran-icongengduobeifen"></use>
                </svg>
                <div class="name">更多备份</div>
                <div class="code-name">#zhiran-icongengduobeifen</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#zhiran-iconziyuanxhdpi"></use>
                </svg>
                <div class="name">更多</div>
                <div class="code-name">#zhiran-iconziyuanxhdpi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#zhiran-icongonggao1-copy"></use>
                </svg>
                <div class="name">公告</div>
                <div class="code-name">#zhiran-icongonggao1-copy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#zhiran-iconshangchuanziyuan-copy"></use>
                </svg>
                <div class="name">上传资源</div>
                <div class="code-name">#zhiran-iconshangchuanziyuan-copy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#zhiran-iconkaitinggonggao"></use>
                </svg>
                <div class="name">开庭公告</div>
                <div class="code-name">#zhiran-iconkaitinggonggao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#zhiran-icongonggao"></use>
                </svg>
                <div class="name">公告</div>
                <div class="code-name">#zhiran-icongonggao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#zhiran-iconshangchuanziyuan"></use>
                </svg>
                <div class="name">上传资源</div>
                <div class="code-name">#zhiran-iconshangchuanziyuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#zhiran-icongonggao1"></use>
                </svg>
                <div class="name">公告</div>
                <div class="code-name">#zhiran-icongonggao1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#zhiran-iconshangchuanziyuan1"></use>
                </svg>
                <div class="name">上传资源</div>
                <div class="code-name">#zhiran-iconshangchuanziyuan1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#zhiran-iconzhuanhuan1"></use>
                </svg>
                <div class="name">转换</div>
                <div class="code-name">#zhiran-iconzhuanhuan1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#zhiran-iconzhuanhuan"></use>
                </svg>
                <div class="name">转换</div>
                <div class="code-name">#zhiran-iconzhuanhuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#zhiran-iconzhuanhuan-01"></use>
                </svg>
                <div class="name">转换-01</div>
                <div class="code-name">#zhiran-iconzhuanhuan-01</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#zhiran-icondianzan"></use>
                </svg>
                <div class="name">点赞</div>
                <div class="code-name">#zhiran-icondianzan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#zhiran-iconicon1"></use>
                </svg>
                <div class="name">赞</div>
                <div class="code-name">#zhiran-iconicon1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#zhiran-iconicon1-copy"></use>
                </svg>
                <div class="name">赞</div>
                <div class="code-name">#zhiran-iconicon1-copy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#zhiran-icondianzan-copy"></use>
                </svg>
                <div class="name">点赞</div>
                <div class="code-name">#zhiran-icondianzan-copy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#zhiran-iconpinglun3-copy"></use>
                </svg>
                <div class="name">评论</div>
                <div class="code-name">#zhiran-iconpinglun3-copy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#zhiran-iconzhuanfa1-copy"></use>
                </svg>
                <div class="name">转发</div>
                <div class="code-name">#zhiran-iconzhuanfa1-copy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#zhiran-iconpinglun1"></use>
                </svg>
                <div class="name">评论</div>
                <div class="code-name">#zhiran-iconpinglun1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#zhiran-iconpinglun2"></use>
                </svg>
                <div class="name">评论</div>
                <div class="code-name">#zhiran-iconpinglun2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#zhiran-iconzhuanfa1"></use>
                </svg>
                <div class="name">转发</div>
                <div class="code-name">#zhiran-iconzhuanfa1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#zhiran-iconpinglun3"></use>
                </svg>
                <div class="name">评论</div>
                <div class="code-name">#zhiran-iconpinglun3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#zhiran-iconzhuanfa11"></use>
                </svg>
                <div class="name">转发1</div>
                <div class="code-name">#zhiran-iconzhuanfa11</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#zhiran-icona-ziyuan618"></use>
                </svg>
                <div class="name">转发</div>
                <div class="code-name">#zhiran-icona-ziyuan618</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#zhiran-iconpinglun1-copy"></use>
                </svg>
                <div class="name">评论</div>
                <div class="code-name">#zhiran-iconpinglun1-copy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#zhiran-icona-ziyuan618-copy"></use>
                </svg>
                <div class="name">转发</div>
                <div class="code-name">#zhiran-icona-ziyuan618-copy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#zhiran-iconzhuanfa11-copy"></use>
                </svg>
                <div class="name">转发1</div>
                <div class="code-name">#zhiran-iconzhuanfa11-copy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#zhiran-iconwenjianjiawenjian"></use>
                </svg>
                <div class="name">文件夹文件</div>
                <div class="code-name">#zhiran-iconwenjianjiawenjian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#zhiran-iconicon_comment"></use>
                </svg>
                <div class="name">icon_comment</div>
                <div class="code-name">#zhiran-iconicon_comment</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#zhiran-iconliulanliang"></use>
                </svg>
                <div class="name">浏览量</div>
                <div class="code-name">#zhiran-iconliulanliang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#zhiran-iconicon_comment-copy"></use>
                </svg>
                <div class="name">icon_comment</div>
                <div class="code-name">#zhiran-iconicon_comment-copy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#zhiran-iconliulanliang_huaban"></use>
                </svg>
                <div class="name">浏览量</div>
                <div class="code-name">#zhiran-iconliulanliang_huaban</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#zhiran-iconfeedback"></use>
                </svg>
                <div class="name">反馈</div>
                <div class="code-name">#zhiran-iconfeedback</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#zhiran-icondianzanshu2"></use>
                </svg>
                <div class="name">点赞数</div>
                <div class="code-name">#zhiran-icondianzanshu2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#zhiran-iconxiazailiang"></use>
                </svg>
                <div class="name">下载量</div>
                <div class="code-name">#zhiran-iconxiazailiang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#zhiran-iconliulanliang1-copy"></use>
                </svg>
                <div class="name">浏览量</div>
                <div class="code-name">#zhiran-iconliulanliang1-copy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#zhiran-iconwodefankui"></use>
                </svg>
                <div class="name">我的反馈</div>
                <div class="code-name">#zhiran-iconwodefankui</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#zhiran-iconyijianfankui"></use>
                </svg>
                <div class="name">意见反馈</div>
                <div class="code-name">#zhiran-iconyijianfankui</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#zhiran-iconshouye"></use>
                </svg>
                <div class="name">首页</div>
                <div class="code-name">#zhiran-iconshouye</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#zhiran-iconcha"></use>
                </svg>
                <div class="name">叉</div>
                <div class="code-name">#zhiran-iconcha</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#zhiran-iconjiahao"></use>
                </svg>
                <div class="name">plus-1</div>
                <div class="code-name">#zhiran-iconjiahao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#zhiran-iconbenpao"></use>
                </svg>
                <div class="name">奔跑</div>
                <div class="code-name">#zhiran-iconbenpao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#zhiran-iconshu"></use>
                </svg>
                <div class="name">树</div>
                <div class="code-name">#zhiran-iconshu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#zhiran-iconcandou"></use>
                </svg>
                <div class="name">蚕豆</div>
                <div class="code-name">#zhiran-iconcandou</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
